<template>
  <div class="comment-item">
    <div class="comment-avatar">
      <img
        :src="comment.user.userAvatar || 'https://picsum.photos/40/40'"
        :alt="comment.user.userName || '用户头像'"
      />
    </div>
    <div class="comment-content">
      <div class="comment-header">
        <div class="comment-author">{{ comment.user.userName || '匿名用户' }}</div>
        <div class="comment-time">{{ formatTime(comment.createTime) }}</div>
      </div>
      <div class="comment-text">{{ comment.content }}</div>
      <div class="comment-actions">
        <div class="comment-action" @click="handleReply(comment)">
          <i class="el-icon-reply"></i>回复
        </div>
        <div v-if="isCurrentUserComment(comment)" class="comment-action" @click="handleDelete">
          <i class="el-icon-delete"></i>删除
        </div>
      </div>

      <!-- 子评论 -->
      <div class="child-comments" v-if="comment.childComments && comment.childComments.length > 0">
        <div
          v-for="childComment in comment.childComments"
          :key="childComment.id"
          class="child-comment-item"
        >
          <div class="child-comment-avatar">
            <img
              :src="childComment.user.userAvatar || 'https://picsum.photos/32/32'"
              :alt="childComment.user.userName || '用户头像'"
            />
          </div>
          <div class="child-comment-content">
            <div class="child-comment-header">
              <div class="child-comment-author">{{ childComment.user.userName || '匿名用户' }}</div>
              <div v-if="childComment.parentId !== comment.id" class="child-comment-reply-to">
                回复 {{ findParentComment(childComment.parentId)?.user?.userName || '某人' }}:
              </div>
            </div>
            <div class="child-comment-text">{{ childComment.content }}</div>
            <div class="child-comment-actions">
              <div class="comment-action" @click="handleReply(childComment)">
                <i class="el-icon-reply"></i> 回复
              </div>
              <div
                v-if="isCurrentUserComment(childComment)"
                class="comment-action"
                @click="handleDelete(childComment.id)"
              >
                <i class="el-icon-delete"></i> 删除
              </div>
            </div>

            <!-- 嵌套子评论 -->
            <div
              class="child-comments"
              v-if="childComment.childComments && childComment.childComments.length > 0"
            >
              <div
                v-for="grandChildComment in childComment.childComments"
                :key="grandChildComment.id"
                class="child-comment-item"
              >
                <div class="child-comment-avatar">
                  <img
                    :src="grandChildComment.user.userAvatar || 'https://picsum.photos/32/32'"
                    :alt="grandChildComment.user.userName || '用户头像'"
                  />
                </div>
                <div class="child-comment-content">
                  <div class="child-comment-header">
                    <div class="child-comment-author">
                      {{ grandChildComment.user.userName || '匿名用户' }}
                    </div>
                    <div class="child-comment-reply-to">
                      回复
                      {{ findParentComment(grandChildComment.parentId)?.user?.userName || '某人' }}:
                    </div>
                  </div>
                  <div class="child-comment-text">{{ grandChildComment.content }}</div>
                  <div class="child-comment-actions">
                    <div class="comment-action" @click="handleReply(grandChildComment)">
                      <i class="el-icon-reply"></i> 回复
                    </div>
                    <div
                      v-if="isCurrentUserComment(grandChildComment)"
                      class="comment-action"
                      @click="handleDelete(grandChildComment.id)"
                    >
                      <i class="el-icon-delete"></i> 删除
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

const props = defineProps({
  comment: {
    type: Object,
    required: true,
  },
  isRoot: {
    type: Boolean,
    default: false,
  },
})

const emits = defineEmits(['delete', 'reply'])

// 格式化时间
const formatTime = (time) => {
  if (!time) return ''
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}

// 查找父评论
const findParentComment = (parentId) => {
  if (!props.isRoot) return null

  // 先在一级评论中查找
  if (props.comment.id === parentId) return props.comment

  // 再在子评论中查找
  if (props.comment.childComments) {
    for (const childComment of props.comment.childComments) {
      if (childComment.id === parentId) return childComment

      // 查找嵌套子评论
      if (childComment.childComments) {
        for (const grandChildComment of childComment.childComments) {
          if (grandChildComment.id === parentId) return grandChildComment
        }
      }
    }
  }

  return null
}

// 判断是否是当前用户的评论
const isCurrentUserComment = (comment = props.comment) => {
  return comment.user.id === userStore.userInfo?.id
}

// 处理回复
const handleReply = (comment = props.comment) => {
  emits('reply', comment)
}

// 处理删除
const handleDelete = (commentId = props.comment.id) => {
  emits('delete', commentId)
}
</script>

<style scoped>
/* 评论项样式 */
.comment-item {
  display: flex;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-content {
  flex: 1;
  min-width: 0;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.comment-author {
  font-weight: 500;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comment-time {
  font-size: 12px;
  color: #909399;
}

.comment-text {
  margin-bottom: 8px;
  line-height: 1.5;
  color: #606266;
  white-space: pre-wrap;
}

.comment-actions {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #909399;
}

.comment-action {
  cursor: pointer;
  transition: color 0.2s;
}

.comment-action:hover {
  color: #409eff;
}

/* 子评论样式 */
.child-comments {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid #ebeef5;
}

.child-comment-item {
  display: flex;
  gap: 8px;
  padding: 8px 0;
}

.child-comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
}

.child-comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.child-comment-content {
  flex: 1;
  min-width: 0;
}

.child-comment-header {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.child-comment-author {
  font-weight: 500;
  color: #303133;
  margin-right: 4px;
}

.child-comment-reply-to {
  color: #909399;
  margin-right: 4px;
}

.child-comment-text {
  margin-bottom: 4px;
  line-height: 1.5;
  color: #606266;
  white-space: pre-wrap;
}

.child-comment-actions {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #909399;
}
.el-icon-reply {
  color: #409eff !important;
}
.el-icon-delete {
  color: #f56c6c !important;
}
</style>
